/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { Card, Button } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import { urlParse } from '@/utils/utils';

const { Description } = DescriptionList;
@connect(({ login }) => ({
  login,
}))
class ClientInfoDetails extends PureComponent {
  state = {
    sysCode: 1,
  };

  componentDidMount() {
    const { location, login } = this.props;
    const { accuAccoId } = this.state;

    const { systemList } = login;
    const { sysCode } = systemList.filter(item => item.isSelected)[0];
    this.setState({
      sysCode,
    });
    const accuAcId = urlParse(location.search).accuAccoId
      ? urlParse(location.search).accuAccoId
      : accuAccoId;
    this.detail(accuAcId);
  }

  closeDetail = () => {
    router.goBack();
  };

  detail = accuAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'waresave/fetchDetailInforAccuPage',
      payload: { accuAccoId },
    }).then(response => {
      const values = response.data;
      let accuArr = '';
      if (values.accuPkgList.length) {
        values.accuPkgList.map(c => {
          accuArr += `${c.accuLsPkgName},`;
        });
      }
      accuArr = accuArr.slice(0, accuArr.length - 1);
      let tempAreaList = '';
      if (values.areaList) {
        values.areaList.map(value => {
          tempAreaList += `${value.areaName}/`;
        });
      }
      tempAreaList = tempAreaList.slice(0, tempAreaList.length - 1);
      let respListArr = '';
      if (values.respList.length) {
        values.respList.map(c => {
          respListArr += `${c.respName},`;
        });
      }
      respListArr = respListArr.slice(0, respListArr.length - 1);

      this.setState({
        accoName: values.accoName,
        unitName: values.unitName,
        uniCreditCode: values.uniCreditCode,
        blngAccoOrg: values.blngAccoOrg,
        isExceedCeiling: Number(values.isExceedCeiling) === 1 ? '是' : '否',
        custBankName: values.custBankName ? values.custBankName : '--',
        custBankId: values.custBankId,
        accuLsPkgIdsList: accuArr,
        remark: values.remark,
        areaList: tempAreaList,
        respList: respListArr,
      });
    });
  };

  render() {
    const {
      accoName,
      unitName,
      areaList,
      uniCreditCode,
      blngAccoOrg,
      isExceedCeiling,
      custBankName,
      custBankId,
      accuLsPkgIdsList,
      remark,
      respList,
      sysCode,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card title="公积金大库详情" bordered={false}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="大库名称 ">{accoName || '--'}</Description>
            <Description term="公司名称">{unitName || '--'}</Description>
            <Description term="统一社会信用代码">{uniCreditCode || '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="开户地区">{areaList || '--'}</Description>
            <Description term="所属公积金机构">{blngAccoOrg || '--'}</Description>
            <Description term="是否突破上线">{isExceedCeiling || '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="公积金组合">{accuLsPkgIdsList || '--'}</Description>
            <Description term="开户行">{custBankName || '--'}</Description>
            <Description term="银行账号">{custBankId || '--'}</Description>
          </DescriptionList>
          {Number(sysCode) !== 2 ? (
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="申报负责人">{respList || '--'}</Description>
              <Description term="备注">{remark || '--'}</Description>
            </DescriptionList>
          ) : (
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="备注">{remark || '--'}</Description>
            </DescriptionList>
          )}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="default" onClick={this.closeDetail}>
            {' 返回 '}
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
